<template>
  <a-modal
    title="操作日志"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            
            <a-col :md="8" :sm="24" v-if="false">
              <a-form-item label="订单ID">
                <a-input v-model="queryParam.orderId" placeholder="请输入订单ID"/>
              </a-form-item>
            </a-col>
          
          </a-row>
        </a-form>
      </div>
      
      
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="getData"
        :alert="true"
        :showPagination="false"
        rowKey="materialId"
      >
        
        <span slot="action" slot-scope="text, record">
        <a-space>
         <a @click="backStoreDetailModal.show({...record,orderId:record.sourceOrderId})">退库详情</a>
        </a-space>
        </span>
      </s-table>
      
      <back-store-detail-modal ref="backStoreDetailModal"/>
    
    </a-card>
  </a-modal>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";
import {STable} from '@/components'
import {emsPlanLogPage} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage'
import BackStoreDetailModal from './backStoreDetailModal.vue'

type Record = {
  materialId: string,
  materialCode: string,
  materialName: string,
  number: number,
  completedNumber: number,
}


@Component({
  components: {
    STable,
    BackStoreDetailModal,
  }
})

export default class BackStorePlanOperationLog extends Vue {
  @Ref() readonly table!: any
  @Ref() readonly backStoreDetailModal!: BackStoreDetailModal
  
  visible = false
  title = ''
  
  // 查询参数
  queryParam = {
    materialType: '',
    sourceOrderId: '',
    pageSize: 10
  }
  
  columns = [
    {
      align: 'center',
      title: '操作方式',
      dataIndex: 'operateMode'
    },
    {
      align: 'center',
      title: '操作人',
      dataIndex: 'operateMan',
    },
    {
      align: 'center',
      title: '操作时间',
      dataIndex: 'createTime',
      
    },
    {
      align: 'center',
      title: '原因',
      dataIndex: 'remark',
      width: '300px',
    },
    
    {
      align: 'center',
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: {customRender: 'action'}
    }
  ]
  
  selectedRowKeys = []
  selectedRows = []
  
  confirmLoading = false
  emsOrder = null
  
  
  rowSelection = {
    getCheckboxProps: (record: Record) => ({
      props: {
        disabled: record.completedNumber > 0,
        name: record.materialCode,
      },
    }),
    selectedRowKeys: this.selectedRowKeys,
    onChange: this.onSelectChange
  }
  
  get routePath() {
    let urlParam = this.$util.getUrlParam(this.$route.path)
    return urlParam
  }
  
  get materialType() {
    return this.routePath?.materialType || this.$businessEnum.MATERIAL_TYPE_ENUM.material.id
  }
  
  // 加载数据方法 必须为 Promise 对象
  getData(parameter: { pageNo: number, pageSize: number }) {
    const params = {
      ...parameter,
      ...this.queryParam,
    }
    return emsPlanLogPage(params).then((res) => {
      res.data.rows.forEach(value => {
        value.normalNumber = 0
      })
      return res.data
    })
  }
  
  show(record) {
    this.visible = true
    this.emsOrder = record
    this.queryParam.sourceOrderId = record.orderId
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  
  handleOk() {
    this.table.refresh()
  }
  
  onSelectChange(selectedRowKeys: string[], selectedRows: Record[]) {
    console.log(selectedRowKeys, selectedRows)
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
  }
  
  
  handleSubmit() {
    if (!this.selectedRowKeys.length) {
      return this.$message.info("请选择包材")
    }
    
  }
  
  handleCancel() {
    this.visible = false;
  }
  
}
</script>

<style lang="less">
/deep/ .ant-table-body {
  td {
    word-break: break-all;
  }
}
</style>
